<!-- @format -->

<template>
  <div>
    <ul>
      <li
        v-for="(item, idx) in arr"
        :key="idx">
        {{ item }}
      </li>
    </ul>
    <!-- 1. 翻转数组 -->
    <button @click="reverse">翻转</button>
    <!-- 2. 数组截取 -->
    <button @click="slice">截取</button>
    <!-- 3. 修改指定下标的元素 -->
    <button @click="update">修改</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [30, 20, 40, 10]
      }
    },
    methods: {
      // 结论1：凡是可以改变数组的方法，对数组做了操作，会导致v-for更新
      // 原生JS中会改变数组的方法一共7个：push/unshift/pop/shift/reverse/splice/sort
      reverse() {
        this.arr.reverse()
      },
      // 结论2：对于那些不改变数组的方法操作了数组，欲使v-for更新，
      //       需要拿到方法的返回值再赋值给数组本身(强行导致数组改变)
      slice() {
        this.arr = this.arr.slice(0, 2)
      },
      // 结论3：修改特定下标的元素，需要借助Vue提供的一个方法，
      // this.$set(数组/对象, 下标/键, 新值)
      update() {
        // this.arr[0] = 99// 直接对指定下标的元素赋值，不会引起v-for更新
        this.$set(this.arr, 0, 99)
        // console.log(this.arr)
      }
    }
  }
</script>

<style></style>
